<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-plus"
                        @click="saveMenu(null)"
                        v-has="'basic:sysmenu:add'"
                >新增
                </el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" row-key="menuId" border
                  :tree-props="{children: 'chrilds', hasChildren: 'hasChildren'}">
            <el-table-column prop="menuName" label="菜单名称"/>
            <el-table-column prop="orderNum" label="显示顺序"/>
            <el-table-column prop="judge" label="类别" :formatter="judgeFormate"/>
            <el-table-column prop="effective" label="显示状态" :formatter="dicdataFormate"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-edit"
                            @click="saveMenu(scope.row)"
                            v-has="'basic:sysmenu:update'"
                    >修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            icon="el-icon-delete"
                            @click="deleteMenu(scope.row)"
                            v-has="'basic:sysmenu:delete'"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form :model="form" :rules="rules" ref="loginForm" class="login-form" label-width="80px">
                <el-form-item label="上级菜单" prop="parentId">
                    <treeselect
                            v-model="form.parentId"
                            :options="tableData"
                            :normalizer="normalizer"
                            :show-count="true"
                            placeholder="选择上级菜单"
                    />
                </el-form-item>
                <el-form-item label="菜单类型" prop="judge">
                    <el-radio-group v-model="form.judge" @change="changeJudge">
                        <el-radio v-for="datastate in judgeOptions"
                                  :key="datastate.dataType"
                                  :label="datastate.dataType">
                            {{datastate.dataName}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input v-model="form.menuName"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="orderNum">
                            <el-input-number v-model="form.orderNum"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12" v-if="form.judge!='3'">
                        <el-form-item label="菜单地址" prop="menuPath">
                            <el-input v-model="form.menuPath"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.judge!='1' && form.wheTher!='1'">
                        <el-form-item label="权限标识" prop="permissions">
                            <el-input v-model="form.permissions"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="菜单图标" prop="icon">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="显示状态" prop="effective">
                            <el-radio-group v-model="form.effective">
                                <el-radio v-for="datastate in dataStatesOptions"
                                          :key="datastate.dataType"
                                          :label="datastate.dataType">
                                    {{datastate.dataName}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单状态" prop="state">
                            <el-radio-group v-model="form.state">
                                <el-radio v-for="datastate in statsDataOptions"
                                          :key="datastate.dataType"
                                          :label="datastate.dataType">
                                    {{datastate.dataName}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.judge=='2'">
                    <el-col :span="12">
                        <el-form-item label="是否外链" prop="wheTher">
                            <el-radio-group @change="changeWheTher" v-model="form.wheTher">
                                <el-radio v-for="datastate in wheTherOptions"
                                          :key="datastate.dataType"
                                          :label="datastate.dataType">
                                    {{datastate.dataName}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.wheTher=='1'">
                        <el-form-item label="外链地址" prop="externalAddress">
                            <el-input v-model="form.externalAddress"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-else>
                        <el-form-item label="组件路径" prop="component">
                            <el-input v-model="form.component"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="close">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    import {treeselect, delMenu, updateMenu, addMenu, getMenu} from '@/api/menu.js'

    // import the component
    import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        components: {Treeselect},
        name: "menumanagement",
        data() {
            return {
                dangers: false,
                //菜单类型码值加载
                judgeOptions: [],
                //菜单状态码值加载
                dataStatesOptions: [],
                //状态字段码值
                statsDataOptions: [],
                //是否外链码值加载
                wheTherOptions: [],
                //用来控制菜单详情界面该菜单是否需要填写地址
                judges: false,
                open: false,
                title: '',
                form: {},
                //菜单树
                tableData: [],
                rules: {
                    parentId: [
                        {required: true, message: '请输入选择父级菜单', trigger: 'blur'},
                    ],
                    menuName: [
                        {required: true, message: '请输入码值类型', trigger: 'blur'},
                        {max: 32, message: '长度在 32 个字符', trigger: 'blur'}
                    ],
                    externalAddress: [
                        {required: true, message: '请输入外链', trigger: 'blur'},
                    ],
                    component: [
                        {required: true, message: '请输入组件路径', trigger: 'blur'},
                    ],
                    menuPath: [
                        {required: true, message: '请输入菜单地址', trigger: 'blur'},
                    ],
                    permissions: [
                        {required: true, message: '请输入权限标识', trigger: 'blur'},
                    ]
                },
            }
        },
        created() {
            this.getList();
            this.getDicdataByType("data_type").then(response => {
                this.dataStatesOptions = response.data;
            });

            this.getDicdataByType("stats_data").then(response => {
                this.statsDataOptions = response.data;
            });

            this.getDicdataByType("judge_").then(response => {
                this.judgeOptions = response.data;
            });
            this.getDicdataByType("whe_ther").then(response => {
                this.wheTherOptions = response.data;
            });


        },
        methods: {

            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.chrilds == null) {
                    delete node.chrilds;
                }
                return {
                    id: node.menuId,
                    label: node.menuName,
                    children: node.chrilds
                };
            },
            /**
             * 类别字段格式化
             * */
            judgeFormate(row) {
                return this.selectLabel(this.judgeOptions, row.judge);
            },
            /**
             * 状态字段格式化
             * */
            dicdataFormate(row) {
                return this.selectLabel(this.dataStatesOptions, row.effective);
            },
            getList() {
                treeselect().then(response => {
                    if (response.code == 0) {
                        this.tableData = response.data;
                    }
                    this.reset();
                })
            },
            reset() {
                // 表单参数
                this.form = {
                    parentId: null,
                    judge: '1',
                    menuName: null,
                    orderNum: null,
                    menuPath: null,
                    icon: null,
                    permissions: null,
                    effective: '1',
                    state: '1',
                    wheTher: '1',
                    externalAddress: null,
                    component: null,
                };
                this.resetForm("form");
            },
            saveMenu(row) {
                this.reset();
                if (row != null) {
                    this.title = '修改菜单信息';
                    getMenu(row.menuId).then(response => {
                        this.form = response.data;
                        this.open = true;
                    });
                } else {
                    this.title = '新增菜单信息';
                    this.open = true;
                }
            },

            close() {
                this.title = '';
                this.open = false;
                this.resetForm("loginForm");
            },
            submitForm() {
                this.$refs["loginForm"].validate(valid => {
                    if (valid) {
                        if (this.form.menuId == null || this.form.menuId == undefined) {
                            addMenu(this.form).then(response => {
                                if (response.code == 0) {
                                    this.msgSuccess("新增成功成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            })
                        } else {
                            updateMenu(this.form).then(response => {
                                if (response.code == 0) {
                                    this.msgSuccess("修改成功");
                                    this.open = false;
                                    this.getList();
                                } else {
                                    this.msgError(response.msg);
                                }
                            })
                        }
                    }
                });
            },
            deleteMenu(row) {
                delMenu(row.menuId).then(response => {
                    if (response.code == 0) {
                        this.msgSuccess("删除成功");
                    }
                    this.getList();
                })
            },

            /**
             * 判断菜单类型
             * @param value
             */
            changeJudge(value) {
                this.form.judge = value;
            }
        }
    }
</script>

<style scoped>
</style>